<html>
<head>
<title>MyCenterPage.ets</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #a9b7c6;}
.s1 { color: #faa23d;}
.s2 { color: #aa7dfc;}
.s3 { color: #e2da90;}
.s4 { color: #db7e9b;}
.s5 { color: #bbb529;}
.s6 { color: #b3e54c;}
.s7 { color: #52cb54;}
</style>
</head>
<body bgcolor="#2b2b2b">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
MyCenterPage.ets</font>
</center></td></tr></table>
<pre><span class="s0">import </span><span class="s1">{ </span><span class="s0">router </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'@kit.ArkUI'</span>
<span class="s0">import </span><span class="s1">{ </span><span class="s0">IUser </span><span class="s1">} </span><span class="s0">from </span><span class="s2">'./LoginPage'</span>

<span class="s0">interface Tool </span><span class="s1">{</span>
  <span class="s0">icon</span><span class="s3">: </span><span class="s0">ResourceStr</span>
  <span class="s0">name</span><span class="s3">: </span><span class="s0">string</span>
  <span class="s0">value</span><span class="s3">?: </span><span class="s0">string</span>
  <span class="s0">onClick</span><span class="s3">?: </span><span class="s4">() </span><span class="s3">=&gt; </span><span class="s0">void</span>
<span class="s1">}</span>

<span class="s5">@</span><span class="s0">Entry</span>
<span class="s5">@</span><span class="s0">Component</span>
<span class="s0">export struct MyCenterPage </span><span class="s1">{</span>
  <span class="s5">@</span><span class="s0">Builder</span>
  <span class="s0">toolsBuilder</span><span class="s4">(</span><span class="s0">tool</span><span class="s3">: </span><span class="s0">Tool</span><span class="s4">) </span><span class="s1">{</span>
    <span class="s0">Row</span><span class="s4">() </span><span class="s1">{</span>
      <span class="s0">Image</span><span class="s4">(</span><span class="s0">tool</span><span class="s3">.</span><span class="s0">icon</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s6">16</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">aspectRatio</span><span class="s4">(</span><span class="s6">1</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">right</span><span class="s3">: </span><span class="s6">12 </span><span class="s1">}</span><span class="s4">)</span>
      <span class="s0">Text</span><span class="s4">(</span><span class="s0">tool</span><span class="s3">.</span><span class="s0">name</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s6">14</span><span class="s4">)</span>
      <span class="s0">Blank</span><span class="s4">()</span>
      <span class="s0">if </span><span class="s4">(</span><span class="s0">tool</span><span class="s3">.</span><span class="s0">value</span><span class="s4">) </span><span class="s1">{</span>
        <span class="s0">Text</span><span class="s4">(</span><span class="s0">tool</span><span class="s3">.</span><span class="s0">value</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s6">12</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s2">'#979797'</span><span class="s4">)</span>
      <span class="s1">}</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s6">50</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">left</span><span class="s3">: </span><span class="s6">16</span><span class="s3">, </span><span class="s0">right</span><span class="s3">: </span><span class="s6">10 </span><span class="s1">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">onClick</span><span class="s4">(() </span><span class="s3">=&gt; </span><span class="s1">{</span>
      <span class="s0">tool</span><span class="s3">.</span><span class="s0">onClick </span><span class="s3">&amp;&amp; </span><span class="s0">tool</span><span class="s3">.</span><span class="s0">onClick</span><span class="s4">()</span>
    <span class="s1">}</span><span class="s4">)</span>
  <span class="s1">}</span>

  <span class="s5">@</span><span class="s0">StorageProp</span><span class="s4">(</span><span class="s2">'user'</span><span class="s4">)</span>
  <span class="s0">user</span><span class="s3">: </span><span class="s0">IUser </span><span class="s3">= </span><span class="s1">{} </span><span class="s0">as IUser</span>

  <span class="s0">build</span><span class="s4">() </span><span class="s1">{</span>
    <span class="s0">Column</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s6">16 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
      <span class="s0">Row</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s6">12 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
        <span class="s0">Image</span><span class="s4">(</span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.ic_mine_avatar'</span><span class="s4">))</span>
          <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s6">55</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">aspectRatio</span><span class="s4">(</span><span class="s6">1</span><span class="s4">)</span>
          <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s6">55</span><span class="s4">)</span>
        <span class="s0">Column</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">space</span><span class="s3">: </span><span class="s6">4 </span><span class="s1">}</span><span class="s4">) </span><span class="s1">{</span>
          <span class="s0">Text</span><span class="s4">(</span><span class="s0">this</span><span class="s3">.</span><span class="s0">user</span><span class="s3">.</span><span class="s0">username</span><span class="s4">)</span><span class="s7">// 用户名设置到这里</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s6">18</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">fontWeight</span><span class="s4">(</span><span class="s6">600</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">bottom</span><span class="s3">: </span><span class="s6">5 </span><span class="s1">}</span><span class="s4">)</span>

          <span class="s0">Text</span><span class="s4">(</span><span class="s2">'编辑个人信息'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">fontColor</span><span class="s4">(</span><span class="s2">'#979797'</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">fontSize</span><span class="s4">(</span><span class="s6">11</span><span class="s4">)</span>
            <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">right</span><span class="s3">: </span><span class="s6">4 </span><span class="s1">}</span><span class="s4">)</span>
        <span class="s1">}</span>
        <span class="s3">.</span><span class="s0">layoutWeight</span><span class="s4">(</span><span class="s6">1</span><span class="s4">)</span>
        <span class="s3">.</span><span class="s0">alignItems</span><span class="s4">(</span><span class="s0">HorizontalAlign</span><span class="s3">.</span><span class="s0">Start</span><span class="s4">)</span>

      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s6">100</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">margin</span><span class="s4">(</span><span class="s1">{ </span><span class="s0">top</span><span class="s3">: </span><span class="s6">50 </span><span class="s1">}</span><span class="s4">)</span>


      <span class="s0">Column</span><span class="s4">() </span><span class="s1">{</span>

        <span class="s0">this</span><span class="s3">.</span><span class="s0">toolsBuilder</span><span class="s4">(</span><span class="s1">{</span>
          <span class="s0">icon</span><span class="s3">: </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.ic_mine_ai'</span><span class="s4">)</span><span class="s3">,</span>
          <span class="s0">name</span><span class="s3">: </span><span class="s2">'登录账号:'</span>
        <span class="s1">}</span><span class="s4">)</span>
        <span class="s0">this</span><span class="s3">.</span><span class="s0">toolsBuilder</span><span class="s4">(</span><span class="s1">{</span>
          <span class="s0">icon</span><span class="s3">: </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.ic_mine_collect'</span><span class="s4">)</span><span class="s3">,</span>
          <span class="s0">name</span><span class="s3">: </span><span class="s2">'登录时间:'</span><span class="s3">,</span>
          <span class="s7">// 登录时间设置给 value 属性</span>
          <span class="s0">value</span><span class="s3">: </span><span class="s2">`</span><span class="s1">${</span><span class="s0">this</span><span class="s3">.</span><span class="s0">user</span><span class="s3">.</span><span class="s0">dateTime</span><span class="s1">}</span><span class="s2">`</span>
        <span class="s1">}</span><span class="s4">)</span>
        <span class="s0">this</span><span class="s3">.</span><span class="s0">toolsBuilder</span><span class="s4">(</span><span class="s1">{</span>
          <span class="s0">icon</span><span class="s3">: </span><span class="s0">$r</span><span class="s4">(</span><span class="s2">'app.media.ic_mine_setting'</span><span class="s4">)</span><span class="s3">, </span><span class="s0">name</span><span class="s3">: </span><span class="s2">'登出'</span><span class="s3">, </span><span class="s0">onClick</span><span class="s3">: </span><span class="s4">() </span><span class="s3">=&gt; </span><span class="s1">{</span>
            <span class="s7">// TODO:编写登出逻辑</span>
            <span class="s0">this</span><span class="s3">.</span><span class="s0">user</span><span class="s3">.</span><span class="s0">username </span><span class="s3">= </span><span class="s2">''</span>
            <span class="s0">router</span><span class="s3">.</span><span class="s0">back</span><span class="s4">()</span>
          <span class="s1">}</span>
        <span class="s1">}</span><span class="s4">)</span>
      <span class="s1">}</span>
      <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s0">Color</span><span class="s3">.</span><span class="s0">White</span><span class="s4">)</span>
      <span class="s3">.</span><span class="s0">borderRadius</span><span class="s4">(</span><span class="s6">8</span><span class="s4">)</span>
    <span class="s1">}</span>
    <span class="s3">.</span><span class="s0">padding</span><span class="s4">(</span><span class="s6">16</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">backgroundColor</span><span class="s4">(</span><span class="s2">'#f3f4f5'</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">linearGradient</span><span class="s4">(</span><span class="s1">{</span>
      <span class="s0">colors</span><span class="s3">: </span><span class="s4">[[</span><span class="s2">'#FFB071'</span><span class="s3">, </span><span class="s6">0</span><span class="s4">]</span><span class="s3">, </span><span class="s4">[</span><span class="s2">'#f3f4f5'</span><span class="s3">, </span><span class="s6">0.3</span><span class="s4">]</span><span class="s3">, </span><span class="s4">[</span><span class="s2">'#f3f4f5'</span><span class="s3">, </span><span class="s6">1</span><span class="s4">]]</span>
    <span class="s1">}</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">width</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
    <span class="s3">.</span><span class="s0">height</span><span class="s4">(</span><span class="s2">'100%'</span><span class="s4">)</span>
  <span class="s1">}</span>
<span class="s1">}</span></pre>
</body>
</html>